<template>
  <div>
    <h1>首页</h1>
    <!-- 父元素监听事件 -->
    <!-- <PlusCom :value="width" @update:value="width = $event"></PlusCom> -->
    <PlusCom v-model:value="width" ref="plus"></PlusCom>
    <PlusCom :value="200"></PlusCom>
    <p
      :style="{
        width: width + 'px',
        height: width + 'px',
        border: '1px solid red'
      }"
    >
      父元素width:{{ width }}
    </p>
    <!--表单与width双向绑定 -->
    <input type="range" v-model.number="width" max="500" />
    <!-- 在父组件访问子组件的方法 -->
    <button @click="plus.addNum(10)">访问子组件的addNum</button>
  </div>
</template>
<script setup>
import PlusCom from '../components/PlusCom.vue'
import { ref, onMounted } from 'vue'
const plus = ref()
onMounted(() => {
  // 获取组件引用
  // 访问组件PlusNum的值
  console.log(plus.value.num)
  plus.value.num = 100

})
const width = ref(50)
</script>
